<template>
  <div>
    <h1>插槽 Slots</h1>
    <div>
      <div class="group">
        <h3>SonDemo13</h3>
        <SonDemo13 class="group3" :is-zhendao="2"></SonDemo13>
      </div>

      <div class="group">
        <h3>SonDemo14</h3>
        <SonDemo14></SonDemo14>
        <SonDemo14 class="group3">
          <div>
            <p @click="() => num1++">
              渲染作用域:插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的
            </p>

            {{ num1 }}
          </div>

          <p>还可以放入其他子组件</p>
          <SonDemo13 class="group3" :is-zhendao="2"> </SonDemo13>
          <hr />
        </SonDemo14>
      </div>

      <div class="group">
        <h3>SonDemo15</h3>
        <div class="group3">
          <SonDemo15>
            <template #default>
              <div>new main</div>
            </template>

            <template #header>
              <div>new header</div>
            </template>

            <template #footer>
              <div>new footer</div>
            </template>
          </SonDemo15>
          <h4>动态具名插槽：</h4>
          <SonDemo15>
            <template #[dynamicSlotName]> 我是一块砖 </template>
            <button type="button" @click="editDynamicSlotName">修改动态具名插槽</button>
          </SonDemo15>
        </div>
      </div>

      <div class="group">
        <h3>SonDemo16</h3>
        <div class="group3">
          <SonDemo16>
            <template #default="{ msg: smsg }">
              <div>new main {{ smsg }}</div>
            </template>

            <template #header="{ title }">
              <div>new header {{ title }}</div>
            </template>

            <template #footer>
              <div>new footer</div>
            </template>
          </SonDemo16>
          <h4>动态具名插槽：</h4>
          <SonDemo16>
            <template #[dynamicSlotName]> 我是一块砖 </template>
            <button type="button" @click="editDynamicSlotName">修改动态具名插槽</button>
          </SonDemo16>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'study4StuDemo4'
}
</script>
<script setup lang="ts">
import { ref } from 'vue'
import SonDemo13 from './components/SonDemo13.vue'
import SonDemo14 from './components/SonDemo14.vue'
import SonDemo15 from './components/SonDemo15.vue'
import SonDemo16 from './components/SonDemo16.vue'

const num1 = ref(1)

// 动态具名插槽的名称
const dynamicSlotName = ref('')

const editDynamicSlotName = () => {
  dynamicSlotName.value = 'header'
}
</script>

<style lang="scss" scoped>
.group {
  border: 3px solid rgb(37, 114, 192);
  margin: 10px;
  padding: 10px;
}

.group3 {
  border: 2px solid rgb(199, 64, 147);
  margin: 10px;
  padding: 10px;
}
</style>
